<style>
    .layui-table th {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-table td {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-input-my {
        height: 34px !important;
        line-height: 34px !important;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 2px;
    }

    .special-label {
        float: left;
        display: block;
        padding: 9px 0 !important;
        width: 100px !important;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }
</style>
<script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>
<div class="layui-form" lay-filter="form-producer">
    <fieldset class="layui-elem-field">
        <legend>项目基础信息</legend>
        <div class="layui-field-box">

            <script type="text/html" template>
                <input type="hidden" name="id" value="{{ d.params.id }}" readonly>
            </script>
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="name" value="{{ d.params.name  || ''}}" autocomplete="off"
                               placeholder="服务项目"
                               class="layui-input" readonly>
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">项目描述</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="description" value="{{ d.params.description  || ''}}"
                               autocomplete="off"
                               placeholder="服务项目描述"
                               class="layui-input" readonly>
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务地址</label>
                <div class="layui-input-inline">
                    <script type="text/html" template>
                        <input type="text" name="loadIp" value="{{ d.params.loadIp  || ''}}" autocomplete="off"
                               placeholder="服务地址"
                               class="layui-input" readonly>
                    </script>
                </div>
                <div class="layui-form-mid layui-word-aux">负载均衡地址或单节点地址</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务类型</label>
                <div class="layui-input-block">
                    <select name="protocol" id="protocol" disabled>
                        <option value="">请选择服务类型</option>
                        <option value="HTTP">HTTP</option>
                        <option value="WEBSERVICE">WEBSERVICE</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">数据格式</label>
                <div class="layui-input-block">
                    <select name="translateProtocol" id="translateProtocol" disabled>
                        <option value="">请选择数据格式</option>
                        <option value="XML">XML</option>
                        <option value="JSON">JSON</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">服务状态</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="radio" name="enable" value="1" title="启用" {{ (d.params.enable==1)?'checked':''}}
                               disabled>
                        <input type="radio" name="enable" value="0" title="禁用" {{ (d.params.enable==0)?'checked':''}}
                               disabled>
                    </script>
                </div>
            </div>

        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>负载节点配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">负载策略</label>
                <div class="layui-input-block">
                    <select name="strategy" id="strategy" disabled>
                        <option value="">请选择负载策略</option>
                        <option value="hash">IP HASH</option>
                        <option value="random">RANDOM</option>
                        <option value="roundRobin">ROUND ROBIN</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">重试次数</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="number" name="retryTime" value="{{ d.params.loadBalance.retryTime }}"
                               placeholder="重试次数"
                               class="layui-input"
                               min="0" max="1000" lay-verType="tips" readonly>
                    </script>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">节点配置</label>
                <div class="layui-input-block">
                    <input name="loadBalanceIdArray" id="loadBalanceIdArray" type="hidden"/>
                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                        <thead>
                        <tr>
                            <th>
                                <div class="layui-table-cell"><span>服务地址</span></div>
                            </th>
                            <th>
                                <div class="layui-table-cell"><span>服务权重</span></div>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="loadBalanceDataTable"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </fieldset>


<!--    <fieldset class="layui-elem-field">-->
<!--        <legend>熔断/降级配置</legend>-->
<!--        <div class="layui-field-box">-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">groupKey</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="text" name="groupKey" value="{{ d.params.hystrixParam.groupKey  || ''}}"-->
<!--                               autocomplete="off"-->
<!--                               placeholder="commandKey"-->
<!--                               class="layui-input" readonly>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">commandKey</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="text" name="commandKey" value="{{ d.params.hystrixParam.commandKey  || ''}}"-->
<!--                               autocomplete="off"-->
<!--                               placeholder="commandKey"-->
<!--                               class="layui-input" readonly>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">短路最小请求数</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="requestVolumeThreshold"-->
<!--                               value="{{ d.params.hystrixParam.requestVolumeThreshold  || ''}}"-->
<!--                               placeholder="短路最小请求数"-->
<!--                               class="layui-input"-->
<!--                               min="0" max="100000" lay-verType="tips" readonly>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">失败百分比阈值</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="errorThresholdPercentage"-->
<!--                               value="{{ d.params.hystrixParam.errorThresholdPercentage  || ''}}"-->
<!--                               placeholder="失败百分比阈值"-->
<!--                               class="layui-input"-->
<!--                               min="0" max="100000" lay-verType="tips" readonly>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">休眠重试间隔</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="sleepWindowInMilliseconds"-->
<!--                               value="{{ d.params.hystrixParam.sleepWindowInMilliseconds  || ''}}"-->
<!--                               placeholder="休眠重试间隔"-->
<!--                               class="layui-input"-->
<!--                               min="0" max="100000" lay-verType="tips" readonly>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label special-label">请求超时时间</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <script type="text/html" template>-->
<!--                        <input type="number" name="timeoutInMilliseconds"-->
<!--                               value="{{ d.params.hystrixParam.timeoutInMilliseconds  || ''}}" placeholder="请求超时时间"-->
<!--                               class="layui-input"-->
<!--                               min="0" max="100000" lay-verType="tips" readonly>-->
<!--                    </script>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </fieldset>-->


    <fieldset class="layui-elem-field">
        <legend>灰度发布配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label special-label">目标服务地址</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="server" value="{{ d.params.grayRelease.server || ''}}"
                               autocomplete="off" placeholder="目标服务地址" class="layui-input" readonly>
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">分流IP地址</label>
                <div class="layui-input-block">
                    <input name="grayIpIdArray" id="grayIpIdArray" type="hidden"/>
                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                        <thead>
                        <tr>
                            <th>
                                <div class="layui-table-cell"><span>ip地址</span></div>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="grayIpTable"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </fieldset>
</div>

<script>
    layui.data.sendParams = function (params) {
        layui.use(['admin', 'form', 'setter'], function () {
            var $ = layui.$
                , admin = layui.admin
                , form = layui.form
                , setter = layui.setter;

            var apiUrl = setter.apiUrl;


            var grayIpId = 0;
            var loadBalanceId = 0;

            var grayIpIdArray = [];
            var loadBalanceIdArray = [];

            initForm();

            function initForm() {
                $("#protocol").val(params.protocol);
                $("#strategy").val(params.loadBalance.strategy);
                $("#translateProtocol").val(params.translateProtocol);

                addGrayIpItem(params.grayRelease.ips, true);
                console.log(params.grayRelease.ips == null)
                addLoadBalanceItem(params.loadBalance.data, true);
                console.log(params.loadBalance.ips == null)

                form.render();
                form.render('select');
            }

            function addLoadBalanceItem(data, canDel) {
                $('#loadBalanceDataTable').append(generatorBalanceHtml(data, canDel));
            }

            function generatorBalanceHtml(data, canDel) {
                if (data == null) {
                    return;
                }
                var html = '';
                if (data.length === 0) {
                    let id = getLoadBalanceId();
                    loadBalanceIdArray.push(id);
                    $('#loadBalanceIdArray').val(loadBalanceIdArray.join());
                    html +=
                        '<tr balanceId="' + id + '">' +
                        '    <td>' +
                        '        <input type="text"  name="server[' + id + ']" ' +
                        '           class="layui-input layui-input-my" lay-verType="tips" ' +
                        '           id="server' + id + '" readonly>' +
                        '    </td>' +
                        '    <td>' +
                        '        <input type="number" name="weight[' + id + ']" ' +
                        '           class="layui-input layui-input-my" min="0" max="1000" ' +
                        '           lay-verType="tips" ' +
                        '           id="weight' + id + '" readonly>' +
                        '    </td>' +
                        '</tr>';
                } else {
                    let id = getLoadBalanceId();
                    loadBalanceIdArray.push(id);
                    $('#loadBalanceIdArray').val(loadBalanceIdArray.join());
                    for (let i = 0; i < data.length; i++) {
                        html +=
                            '<tr balanceId="' + id + '">' +
                            '    <td>' +
                            '        <input type="text"  name="server[' + id + ']" ' + 'value="' + data[i].server + '"' +
                            '           class="layui-input layui-input-my" lay-verType="tips" ' +
                            '           id="server' + id + '" readonly>' +
                            '    </td>' +
                            '    <td>' +
                            '        <input type="number" name="weight[' + id + ']" ' + 'value="' + data[i].weight + '"' +
                            '           class="layui-input layui-input-my" min="0" max="1000" ' +
                            '           lay-verType="tips" ' +
                            '           id="weight' + id + '" readonly>' +
                            '    </td>' +
                            '</tr>';
                    }
                }

                return html;
            }

            function addGrayIpItem(data, canDel) {
                $('#grayIpTable').append(generatorGrayHtml(data, canDel));
            }

            function generatorGrayHtml(data, canDel) {
                if (data == null) {
                    return;
                }
                var html = '';
                if (data.length === 0) {
                    let id = getGrayIpId();
                    grayIpIdArray.push(id);
                    $('#grayIpIdArray').val(grayIpIdArray.join());
                    html +=
                        '<tr grayId="' + id + '">' +
                        '    <td>' +
                        '        <input type="text"  name="ip[' + id + ']" ' +
                        '           class="layui-input layui-input-my" lay-verType="tips" ' +
                        '           id="server' + id + '" readonly>' +
                        '    </td>' +
                        '</tr>';
                } else {
                    for (let i = 0; i < data.length; i++) {
                        let id = getGrayIpId();
                        grayIpIdArray.push(id);
                        $('#grayIpIdArray').val(grayIpIdArray.join());
                        html +=
                            '<tr grayId="' + id + '">' +
                            '    <td>' +
                            '        <input type="text"  name="ip[' + id + ']" ' + 'value="' + data[i] + '"' +
                            '           class="layui-input layui-input-my" lay-verType="tips"' +
                            '           id="server' + id + '" readonly>' +
                            '    </td>' +
                            '</tr>';
                    }
                }
                return html;
            }


            function getGrayIpId() {
                return grayIpId++;
            }

            function getLoadBalanceId() {
                return loadBalanceId++;
            }

        });
    }
</script>